﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="ClientSide.aspx.cs" Inherits="YUIAspNetDemo.Tooltip.ClientSide" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Tooltip : Client side</title>
    <script type="text/javascript">
        function ContextTrigger(sender, args)
        {
            $find('<%= this.ttip.ClientID %>').get_YUIControl().cfg.setProperty("text", 'this is the tooltip for element: '+args.element.id);
            $find('<%= this.l.ClientID %>').log('ContextTrigger: [element: '+args.element.id+']', 'error', 'YUIASPNET');
        }
        
        function MouseOver(sender, args)
        {
            if(args.element.id == 'link4') args.cancel = true;
            $find('<%= this.l.ClientID %>').log('MouseOver: [element: '+args.element.id+']', 'error', 'YUIASPNET');
        }
        
        function MouseOut(sender, args)
        {
            $find('<%= this.l.ClientID %>').log('MouseOut: [element: '+args.element.id+']', 'error', 'YUIASPNET');
        }
    </script>    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Tooltip client side events</h1>
    
    <p>You can use the same instance of YUIAsp.Net Tooltip to display different text using the OnClientContextTrigger client side handler.</p>
    
    <p>You can use the OnClientMouseOver handler to decide wether to show the tooltip or not.</p>
        
    <ul>
        <li><a id="link1" href="http://www.yuiasp.net">Hover me for tooltip</a></li>
        <li><a id="link2" href="http://www.yuiasp.net">Hover me for tooltip 2</a></li>
        <li><a id="link3" href="http://www.yuiasp.net">Hover me for tooltip 3</a></li>
        <li><a id="link4" href="http://www.yuiasp.net">This element doesn't allow tooltip to show</a></li>
    </ul>
    
    <yui:Tooltip ID="ttip" runat="server" Width="150px" ThemeName="Blue" AttachToElementList="link1,link2,link3, link4"
        OnClientContextTrigger="ContextTrigger" OnClientMouseOver="MouseOver" OnClientMouseOut="MouseOut"> 
        <Effect Effect="Fade" Duration="0.4" />
        <ContentTemplate>Hello world! Do you like my tooltip?</ContentTemplate>
    </yui:Tooltip>
    
    <yui:Logger ID="l" runat="server" Top="0" Left="0" />
        
    <p>The same tooltip can be attached to multiple elements.</p>
</asp:Content>